<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>扫码统计</title>
		<link href="css/common.css" rel="stylesheet" type="text/css" />
		<link href="css/normolize.css" rel="stylesheet" type="text/css" />
		<link href="css/style.css" rel="stylesheet" type="text/css" />
		<!--[if IE 9]> <link href="css/ieHack9.css" rel="stylesheet" type="text/css" /> <![endif]-->
		<!--[if IE 8]> <link href="css/ieHack.css" rel="stylesheet" type="text/css" /><link href="css/ieHack8.css" rel="stylesheet" type="text/css" /> <![endif]-->
		<!--[if lte IE 7]> <link href="css/ieHack.css" rel="stylesheet" type="text/css" /> <![endif]-->
		<style>
			.table.saomatable table>tbody>tr>td,.table.saomatable table>thead>tr>th{border-right:1px solid #ddd;}
			/*.qrdetailTable.table table>tbody>tr>td{border-bottom:none;}*/
		</style>
	</head>

	<body>
		<script src="js/tpl/header.js" type="text/javascript" charset="utf-8"></script>
		<div class="page-wrapper productlist minwidth border" id="page-wrapper">
			<div class="line"></div>
			<script src="js/tpl/menu.js" type="text/javascript" charset="utf-8"></script><div class="vertival-line"></div>
			<div class="page-content">
				<div class="tablist">
					<ul>
						<li class="tabItem">
							<a href="dataCount.html#dataCount">产品统计</a>
						</li>
						<li class="tabItem active">
							<a href="qrCount.html#dataCount">扫码统计</a>
						</li>
						<li class="tabItem">
							<a href="prizeCount.html#dataCount">中奖统计</a>
						</li>
					</ul>
				</div>

				<div class="page-container">
					<div class="page-form">
						<div class="form">
							<form class="inline-form" id="searchForm">
									<div>
										<label>产品名称：</label>
										<input type="text" placeholder="请输入产品名称" style="width: 110px;" />
									</div>
									<div>
										<label>铺货单号：</label>
										<input type="text" placeholder="请输入铺货单号" style="width: 110px;" />
									</div>
									<div>
										<label>扫码时间：</label>
										<input type="text" class="Wdate" onClick="WdatePicker()" />--<input type="text" class="Wdate" onClick="WdatePicker()" />
									</div>
									<input type="hidden" value="" id="pageNo" name="pageNo" />
									<input type="button" value="搜索" class="search-input-button" />
									<input type="button" value="重置" class="search-input-button bgblue" onclick="resetForm()" style="margin-right:0px;" />
						 

							</form>
						</div>
					</div>
					
					<div class="halfwidth fl" style="margin-top:20px;">
						<p style="margin-bottom:20px;">扫码分布图：</p>
						<div class="charts">
							<div id="main" style="width:100%;height:240px;"></div>
						</div>
					</div>
					<div class="halfwidth fl"  style="margin-top:20px;">
						<p style="margin-bottom:20px;">各县扫码量统计：</p>
						<div class="table saomatable" style="margin-bottom:0px;">
							<table style="margin:0px;border-bottom: none;" >
								<thead style="margin:0px;border-bottom: none;">
									<tr >
										<th style="width:50px">序号</th>
										<th style="width:120px">城市名称</th>
										<th style="width:150px">产品名称</th>
										<th  style="width:100px">扫码量</th>
									</tr>
								</thead>
							</table>
							<div  id="scorllTable"  style="border-bottom: 1px solid #ddd;height:259px;overflow: hidden;">
								<table  style="margin:0px;" >
								<tbody>
									<tr>
										<td  style="width:50px">1</td>
										<td  style="width:120px">合肥</td>
										<td  style="width:150px"><p class="text-ellipsis">敬酒125</p></td>
										<td  style="width:100px">2500</td>
									</tr>
									<tr>
										<td  style="width:50px">1</td>
										<td  style="width:120px">合肥</td>
										<td  style="width:150px"><p class="text-ellipsis">敬酒125</p></td>
										<td  style="width:100px">2500</td>
									</tr>
									<tr>
										<td  style="width:50px">1</td>
										<td  style="width:120px">合肥</td>
										<td  style="width:150px"><p class="text-ellipsis">敬酒125</p></td>
										<td  style="width:100px">2500</td>
									</tr>
									<tr>
										<td  style="width:50px">1</td>
										<td  style="width:120px">合肥</td>
										<td  style="width:150px"><p class="text-ellipsis">敬酒125</p></td>
										<td  style="width:100px">2500</td>
									</tr>
									<tr>
										<td  style="width:50px">1</td>
										<td  style="width:120px">合肥</td>
										<td  style="width:150px"><p class="text-ellipsis">敬酒125</p></td>
										<td  style="width:100px">2500</td>
									</tr>
									<tr>
										<td  style="width:50px">1</td>
										<td  style="width:120px">合肥</td>
										<td  style="width:150px"><p class="text-ellipsis">敬酒125</p></td>
										<td  style="width:100px">2500</td>
									</tr>
									<tr>
										<td  style="width:50px">1</td>
										<td  style="width:120px">合肥</td>
										<td  style="width:150px"><p class="text-ellipsis">敬酒125</p></td>
										<td  style="width:100px">2500</td>
									</tr>
								</tbody>
							</table>
							</div>
							
						</div>
					</div>
					<div class="clearfix"></div>
					<div style="margin-top:40px;" >
						<p style="margin-bottom:20px;">扫码明细统计表：</p>
						<div class="table qrdetailTable" style="margin-bottom:10px;" >
							<table style="margin:0px;">
								<thead>
									<tr>
										<!--<th>二维码身份ID</th>
										<th>扫码时间</th>-->
										<th>产品信息</th>
										<th>铺货单号</th>
										<!--<th>产品名称</th>-->
										<th>用户</th>
										<th>扫码信息</th>
										<!--<th>设备</th>-->
										<!--<th>扫码地区</th>-->
									</tr>
								</thead>
								<tbody id="itemContainer">
									<tr>
										
										<td>
											<div class="text-left" style="width:200px;margin:auto;">
												<p class="text-ellipsis">名称：蓝带将军啤酒哈哈哈哈哈</p>
												<p class="text-ellipsis tabletop">ID：NWwDzzqJsifL</p>
											</div>
										</td>
										<td >
											<p>S20160416145503102</p>
										</td>
										<td >
											<p>15820054909/三七</p>
										</td>
										<td >
										<div class="text-left" style="width:200px;margin:auto;">	
											<p>时间：2016年8月16日22:07:27</p>
											<p class="tabletop">地区：山东省济南市</p>
											<p class="tabletop">设备：手机android--微信</p>
										</div>
										</td>
									</tr>
<tr>
										
										<td>
											<div class="text-left" style="width:200px;margin:auto;">
												<p class="text-ellipsis">名称：蓝带将军啤酒哈哈哈哈哈</p>
												<p class="text-ellipsis tabletop">ID：NWwDzzqJsifL</p>
											</div>
										</td>
										<td >
											<p>S20160416145503102</p>
										</td>
										<td >
											<p>15820054909/三七</p>
										</td>
										<td >
										<div class="text-left" style="width:200px;margin:auto;">	
											<p>时间：2016年8月16日22:07:27</p>
											<p class="tabletop">地区：山东省济南市</p>
											<p class="tabletop">设备：手机android--微信</p>
										</div>
										</td>
									</tr>
									<tr>
										
										<td>
											<div class="text-left" style="width:200px;margin:auto;">
												<p class="text-ellipsis">名称：蓝带将军啤酒哈哈哈哈哈</p>
												<p class="text-ellipsis tabletop">ID：NWwDzzqJsifL</p>
											</div>
										</td>
										<td >
											<p>S20160416145503102</p>
										</td>
										<td >
											<p>15820054909/三七</p>
										</td>
										<td >
										<div class="text-left" style="width:200px;margin:auto;">	
											<p>时间：2016年8月16日22:07:27</p>
											<p class="tabletop">地区：山东省济南市</p>
											<p class="tabletop">设备：手机android--微信</p>
										</div>
										</td>
									</tr>
									 
									
								</tbody>
							</table>
						</div>

						<div class="pagelist fr"  style="margin-bottom:20px;">
							<div class=" pagedesc fl">当前<span class="currentPage"></span>/<span class="totalpage"></span>，每页<span class="perpage"></span>条，共<span class="totalnumber"></span>条</div>
							<div class="pagination inline-block fl"></div>
							<div class="inline-block fl">
								到第<input type="text" value="" class="gotopage" />页 <input type="button" value="跳转" class="search-input-button border-radius bgblue gotopage_button"></span>
							</div>
						</div>

					</div>

				</div>

			</div>
		</div>

		<div class="footer">
			<div class="footercontainer">
				<ul>
					<li>
						<a href="#">关于我们</a>
					</li>
					<li>
						<a href="#">服务与支持</a>
					</li>
					<li>
						<a href="#">常见问题</a>
					</li>
					<li>
						<a href="#">人才招聘</a>
					</li>
					<li>
						<a href="#">加盟合作</a>
					</li>
				</ul>

				<div style="margin-top:13px;">版权所有@ 2015 - 2016 深圳在乎传媒科技有限公司 粤ICP备15107022-1号</div>
			</div>

		</div>

	</body>

	<script src="js/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/page/jPages.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/page/pageFun.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/wdatePicker/WdatePicker.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/js.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/scroll/jquery.slimscroll.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/echart/echarts.min.js" type="text/javascript"></script>
	<script src="js/echart/echartOperate.js" type="text/javascript"></script>
    <script src="js/echart/china.js" type="text/javascript" charset="utf-8"></script>
    
	<script>
	function randomData() {
    return Math.round(Math.random()*1000);
}
	
		$(function() {
			commonObj.srcoll('scorllTable','259px');
				
				
			var pageObj = new pageFun();
			var currentpage = 50,
				perPage = 10,
				totalNumber =940;
			pageObj.pageNoObj = $('#pageNo');
			pageObj.submitFun = function() {
					$('#searchForm').submit();
				}
				/*参数每页多少个,当前页,总个数,容器的ID*/
			pageObj.init(perPage, currentpage, totalNumber, 'itemContainer');
			
			
		
			
			/*地图*/
			//dataarr里面的name值必须去掉市省这些东西
			
			var dataarr = [
                {name: '北京',value: randomData() },
                {name: '天津',value: randomData() },
                {name: '上海',value: randomData() },
                {name: '重庆',value: randomData() },
                {name: '河北',value: randomData() },
                {name: '河南',value: randomData() },
                {name: '云南',value: randomData() },
                {name: '辽宁',value: randomData() },
                {name: '黑龙江',value: randomData() },
                {name: '湖南',value: randomData() },
                {name: '安徽',value: randomData() },
                {name: '山东',value: randomData() },
                {name: '新疆',value: randomData() },
                {name: '江苏',value: randomData() },
                {name: '浙江',value: randomData() },
                {name: '江西',value: randomData() },
                {name: '湖北',value: randomData() },
                {name: '广西',value: randomData() },
                {name: '甘肃',value: randomData() },
                {name: '山西',value: randomData() },
                {name: '内蒙古',value: randomData() },
                {name: '陕西',value: randomData() },
                {name: '吉林',value: randomData() },
                {name: '福建',value: randomData() },
                {name: '贵州',value: randomData() },
                {name: '广东',value: randomData() },
                {name: '青海',value: randomData() },
                {name: '西藏',value: randomData() },
                {name: '四川',value: randomData() },
                {name: '宁夏',value: randomData() },
                {name: '海南',value: randomData() },
                {name: '台湾',value: randomData() },
                {name: '香港',value: randomData() },
                {name: '澳门',value: randomData() }
            ];
			createMapChart('main', dataarr, '');
			
		})
	</script>

</html>